<template>
  <common-page>
    <AuthFormCard>
      <template v-slot:form>
        <el-form
            label-position="top"
            label-width="100px"
            :model="cpdForm"
            :rules="changePasswordRules"
            ref="ruleFormRef"
            @keydown.enter="changeSubmit(ruleFormRef)"
        >

          <el-form-item :label="AuthLang.label.mail" prop="email">
            <el-input size="large" clearable :placeholder="AuthLang.rules.mailInput" v-model="cpdForm.email"/>
          </el-form-item>

          <el-form-item :label="AuthLang.label.newPassword" prop="rePassword">
            <el-input size="large" show-password clearable :placeholder="AuthLang.rules.passwordReInput"
                      v-model="cpdForm.rePassword"/>
          </el-form-item>
          <el-form-item :label="AuthLang.label.code" prop="ecode">
            <auth-code/>
          </el-form-item>
        </el-form>
      </template>

      <template v-slot:footer>
        <div>
          <el-button
              round
              type="primary" @click="changeSubmit(ruleFormRef)">确认
          </el-button>
        </div>
        <div>
          <el-button
              round
              type="success"
              @click="$router.push({name:'login'})">
            返回
          </el-button>
        </div>
      </template>
    </AuthFormCard>
  </common-page>

</template>

<script lang="ts">
import AuthFormCard from "@/components/auth/AuthFormCard.vue";
import {changePasswordRules} from "@/entity/auth/AuthRules";
import {ChangePassword} from "@/entity/auth/AuthEntity";
import AuthCode from "@/components/auth/AuthCode.vue";
import {reactive, ref, toRaw} from "vue";
import {FormInstance} from "element-plus";
import {AuthStore} from "@/store/AuthStore";
import {Message} from "@/utils/Message";
import {MailStore} from "@/store/MailStore";
import {storeToRefs} from "pinia";
import {AuthLang} from "@/lang/auth/AuthLang";
import {useRouter} from "vue-router";
import {BusinessCode} from "@/lang/Common";
import CommonPage from "@/components/common/CommonPage.vue";

export default {
  name: "ChangePassword",
  components: {CommonPage, AuthFormCard, AuthCode},
  setup() {
    const authStore = AuthStore();
    const mailStore = MailStore();

    const router = useRouter();

    // 将pinia的属性响应式导入
    const {ecode, email} = storeToRefs(mailStore);
    // 初始化状态
    mailStore.$reset();
    // 初始化忘记密码表单
    const cpdForm: ChangePassword = reactive({
      email: email,
      rePassword: "",
      ecode: ecode
    });

    // 表单实例
    const ruleFormRef = ref<FormInstance>();

    const changeSubmit = async (formEl: FormInstance | undefined) => {
      await formEl?.validate(isValid => {
        if (isValid) {
          // 这里要取消响应式，否则会影响到表单提交
          let temp = toRaw(cpdForm);
          temp.email = mailStore.email;
          temp.ecode = mailStore.ecode;
          // 请求服务
          authStore.changePassword({...temp}).then(res => {
            // 业务码比对
            if (res?.data?.code == BusinessCode.Ok) {
              Message.success(AuthLang.ok.changePswd);
              // 重置表单字段
              ruleFormRef.value?.resetFields();
              // 重置状态库
              mailStore.$reset();
              // 跳转到登录页面
              router.push({name: "login"});
            }
          });
        }
      });
    };
    return {
      changePasswordRules,
      cpdForm,
      ruleFormRef,
      changeSubmit,
      AuthLang

    };
  }
};
</script>

<style scoped>
</style>